<template>
	<view>
		<view class="data-box">
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80">
							<u-form-item label="借用人" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="物资编号" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.code"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="物资名称" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.wzName"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="借用时间" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.borrowTime"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="借用事由" required borderBottom>
								<u--textarea
								disabled
								disabledColor="#ffffff"
								v-model="info.reason"
								inputAlign="right"
								border="none"
								autoHeight
								></u--textarea>
							</u-form-item>
							<u-form-item label="归还状态" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								:value="info.status==1?'已借用':'已归还'"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<view class="" v-if="info.status == 0">
								<u-form-item label="归还时间" required borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									:value="info.backTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
							</view>
							<u-form-item label="提交人" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.createBy"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button" v-show="info.status==1 && userIdentity =='管理员'">
			<view style="background-color: #9a9d9f;" class="submit-block" @click="submit()">
				归 还
			</view>
		</view>
	</view>
</template>

<script>
	import { getInfo,returnwz } from '@/api/wzuse.js'
	export default {
		data() {
			return {
				userIdentity:'用户',
				id:'',
				type:'',
				amountAll:0,
				info:{},
				expenseDetailList:[],
			}
		},
		onLoad(option) {
			this.userIdentity = option.userIdentity
			this.id = option.id
			this.type = option.type
			this.getDetail(option.id)
		},
		methods: {
			submit(){
				uni.showModal({
				  content: '确定要现在归还吗？',
				  showCancel: true,
				  confirmText: '确定',
				  cancelText: '取消',
				  success: res => {
				    if (res.confirm) {
						this.doRevoke(this.id)
				    }
				  }
				})
			},
			async doRevoke(id){
				this.info.backTime = this.formatDate(new Date())
				const { data } = await returnwz(this.info);
				if(data.code == 200){
					uni.showToast({
						title: '撤销成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 500)
				}
			},
			async getDetail(id){
				let { data } = await getInfo(id);
				if(data.code == 200){
					this.info = data.data
				}
			},
			formatDate(newDate) {
			    let date = newDate;
			    let YY = date.getFullYear();
			    let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			    let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			    let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			    let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			    let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			
				// 这里修改返回时间的格式
				return YY + "年" + MM + "月" + DD + "日" + ' ' + hh + ":" + mm
			},
		}
	}
</script>

<style>
.per-list.per-all {
	padding: 30rpx;
}
.list_user {
	display: flex;
	justify-content: space-between;
}
.list_user .left {
	position: relative;
	width: 2.5rem;
	font-size: 1em !important;
}
.list_left_icon {
	position: absolute;
	bottom: 0;
	right: 0;
}
.list_user .right {
	width: 85%;
	height: 2.5rem;
}
.list_user .right .line1 {
	display: flex;
	justify-content: space-between;
	color: #999;
}
.list_user .right .line2 {
	color: #666;
}
.list_user .right .line3 {
	padding: 10rpx;
	background-color: #d4d4d4;
	border-radius: 0 10rpx 10rpx 10rpx;
	line-height: 2;
	color: #666;
	font-size: 25rpx;
}
.list_line {
	width: 10%;
	text-align: center;
	margin: 10rpx 0;
}
.list_line .line {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx solid #aaa;
	border-radius: 5rpx;
}
.list_line .lineDash {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx dashed #aaa;
	border-radius: 5rpx;
}

	.per-list {
		margin-right: 50rpx;
	}
	
	.pers-pic {
		height: 65rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 85rpx;
		width: 26rpx;
	}
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	}
	.submit-block_item {
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	.submit-block_item:nth-child(2) {
		background-color: #9a9d9f;
	}
	.per-list-csr {
		display: flex;
		justify-content: left;
	}
	.per-list-csr .csr-item {
		text-align: center;
		display: flex;
	}
	.csr-item .csr-icon  {
		display: flex;
		margin: 0 10rpx;
	}
	
	.qz {
	  position: absolute;
	  right: 80rpx;
	  top: 40rpx;
	}
	.qz image {
	  width: 150rpx;
	  height: 150rpx;
	}
	.list_left_icon {
		background-color: #fff;
		border-radius: 50%;
	}
	.list_left_icon icon{
		vertical-align: bottom;
		display: block;
	}
	.submit-button .submit-block {
		background-color: #fff;
	}
</style>